<template>
  <div>
    <span>全选:</span>
    <input v-model="isAll" type="checkbox" />
    <button>反选</button>
    <!-- 选择列表 -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <input v-model="item.checked" type="checkbox" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
// 问题：计算属性的默认写法->函数写法->此时计算属性不能被修改
// 解决方法：使用计算属性的完整写法->对象写法
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          checked: false,
        },
        {
          name: "孙悟空",
          checked: false,
        },
        {
          name: "唐僧",
          checked: false,
        },
        {
          name: "白龙马",
          checked: false,
        },
      ],
    };
  },
  methods:{
    
  },
  computed: {
    // 计算arr列表是否全部是选中状态->决定全选框是否选中
    // 相当于完整写法的get()
    // isAll() {
    //   return this.arr.every(item=>item.checked === true);
    // }
    isAll:{
      get(){
        return this.arr.every(item=>item.checked === true);
      },
      set(isChecked){
        console.log('全选框的选中状态：', isChecked);
        this.arr.forEach(item=>{
          item.checked = isChecked;
        })
      }
    }
  },
};
</script>

<style>
</style>